<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过后代选择器显示隐藏</title>
    <style>
        #bg {
            width: 1280px;
            height:720px;
            background-image: url("../image/bg.gif");
        }

        .dom .select {
            position: absolute; /*需要添加定位，不然会被未选中显示的内容挤下去*/
            display: none; /*未被选中时隐藏选中才显示的内容*/
        }

        .dom .unselect {
            display: block; /*未获取焦点时显示没被选中需要显示的内容*/
        }

        .focus .select {
            display: block; /*获取焦点时显示被选中的需要显示的内容*/
        }

        .focus .unselect {
            visibility: hidden; /*获取焦点时隐藏未被选中需要显示的内容*/
        }
    </style>
</head>
<body>
<!-- 以下图片为本地数据，如复制使用请修改-->
<div id="bg">
    <div class="dom" id="item0" style="position: absolute;left:890px;top:100px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/gengduo.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/gengduo.png" alt=""></div>
    </div>
    <div class="dom" id="item1" style="position: absolute;left:200px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/1.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/1.png" alt=""></div>
    </div>
    <div class="dom" id="item2" style="position: absolute;left:500px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/2.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/2.png" alt=""></div>
    </div>
    <div class="dom" id="item3" style="position: absolute;left:800px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/3.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/3.png" alt=""></div>
    </div>
    <div class="dom" id="item4" style="position: absolute;left:200px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/4.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/4.png" alt=""></div>
    </div>
    <div class="dom"  id="item5" style="position: absolute;left:500px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/5.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/5.png" alt=""></div>
    </div>
    <div class="dom"  id="item6" style="position: absolute;left:800px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/5.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/5.png" alt=""></div>
    </div>
</div>
<script src="../focus.js"></script>
<script>
    var vm = new FOCUS({
        focusId: 'item3', // 页面首先获取焦点的dom元素的Id
        event: {
            keyOkEvent: function (focusId) {
                console.log("点击了确认键，当前获得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 0:

                        break
                }
            },
            keyBackEvent: function (focusId) {
                console.log("点击了返回键，当前获得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 6:
                    case 7:

                        break
                }
            }
        }
    })
</script>
</body>
</html>
